<html lang="en"> <head> <script src="./d3/d3-4.7.3/d3.js"></script> </head> <body>
    <script type="text/javascript" charset="utf-8">
        // 线性比例尺, 能将一个连续的区间, 映射到另一区间
        var dataset = [1.2, 2.3, 0.9, 1.5, 3.3]; // 将 dataset 中最小的值, 映射成 0, 将最大的值, 映射成 300
        var min = d3.min(dataset),
            max = d3.max(dataset);
        var linear = d3.scaleLinear() // scaleLinear 返回一个线性比例尺, d3.scalelinear() 的返回值, 是可以当做函数来使用的
            .domain([min, max]) // 定义域
            .range([0, 300]); // 值域
        console.log(linear(0.9), linear(2.3), linear(3.3)); // 返回 0, 175, 300

        // 序数比例尺, 定义域和值域不一定是连续的, 可能是离散的
        var index = [0, 1, 2, 3, 4];
        var color = ["red", "blue", "green", "yellow", "black"]; // 我们希望 0 对应颜色 red, 1 对应 blue, 依次类推
        var ordinal = d3.scaleOrdinal()
            .domain(index)
            .range(color);
        console.log(ordinal(0), ordinal(2), ordinal(4)); // red green black

        // 给柱形图添加比例尺
        var dataset = [2.5, 2.1, 1.7, 1.3, 0.9];
        var linear = d3.scaleLinear()
            .domain([0, d3.max(dataset)])  // 定义域
            .range([0, 250]);  // 值域
        var rectHeight = 25; // 每个矩形所占的像素高度(包括空白)
        d3.select("body").append("svg").selectAll("rect").data(dataset).enter().append("rect")  // 这里的介绍见 ./l2_xx.html
            .attr("x", 20)
            .attr("y", function(d, i) {
                return i * rectHeight;
            })
            .attr("width", function(d) {
                return linear(d); // 在这里用比例尺
            })
            .attr("height", rectHeight - 2)
            .attr("fill", "steelblue");
    </script>
</body> </html>
